<!--
 * @Author: your name
 * @Date: 2021-12-09 11:33:26
 * @LastEditTime: 2021-12-11 17:44:46
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \geek-admin-test\src\pages\about.vue
-->

<template>
  <div>
    <div>
    <h1 @click="add">{{ count }}</h1>

    </div>
    <div>
     <button @click="toggle">click</button>
      <transition name="fade">    
        <h1 v-if="showTitle">你好 Vue 3</h1>  
        </transition>
    </div>
  </div>

</template>

<script setup>
import { ref } from "vue";
let count = ref(1)
let color = ref('red')
function add() {
  count.value++
  color.value = Math.random()>0.5? "blue":"red"
}
let showTitle = ref(true)
function toggle(){
  showTitle.value = ! showTitle.value
}
</script>

<style scoped>
h1 {
  color:v-bind(color);
}
.fade-enter-active,.fade-leave-active {  transition: opacity 2s linear;}
.fade-enter-from,.fade-leave-to {  opacity: 0;}
</style>>